<template>
    <div class="searchlist">
        <xjsearch></xjsearch>
        <van-cell v-show="this.livelist.length == 0 ? false : true">
            <template #title>
                <span style="font-weight: bold; font-size: 16px">近期直播</span>
            </template>
            <template #right-icon>
              <router-link :to="{name:'moresearchlist'}" style="color:black"> 
                查看更多
                <van-icon name="arrow" size="15" />
               </router-link> 
            </template>
        </van-cell>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh2">
            <van-card
                num="2"
                price="2.00"
                :desc="item4.description"
                :title="item4.title"
                thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
                origin-price="10.00"
                v-for="(item4, index4) in livelist"
                :key="index4"
                @click="clickLive(item4.id)"
            >
                <template #thumb>
                    <van-image width="110" height="90" :src="item4.cover" />
                </template>
                <template #price>
                    <span style="color: red">{{ item4.price == 0 ? '免费' : '￥' + item4.price }}</span>
                </template>
                <template #origin-price>
                    <span>{{ item4.marking_price == 0 ? '' : '￥' + item4.marking_price }}</span>
                </template>
                <template #tags>
                    <van-tag plain type="danger" style="margin-right: 3px" v-for="(item5, index5) in item4.tag" :key="index5">{{
                        item5
                    }}</van-tag>
                </template>
                <template #num>
                    <span>{{ item4.view }}次观看</span>
                </template>
            </van-card>
        </van-pull-refresh>
        <van-cell v-show="this.list.length == 0 ? false : true">
            <template #title>
                <span style="font-weight: bold; font-size: 16px">专栏列表</span>
            </template>
            <template #right-icon> <van-icon name="sort" size="15" />排序 </template>
        </van-cell>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
                <van-card
                    num="2"
                    price="2.00"
                    :desc="item2.description"
                    :title="item2.title"
                    thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
                    origin-price="10.00"
                    v-for="(item2, index2) in list"
                    :key="index2"
                    @click="clickColumn(item2.id)"
                >
                    <template #thumb>
                        <van-image width="110" height="90" :src="item2.cover" />
                    </template>
                    <template #price>
                        <span style="color: red">{{ item2.price == 0 ? '免费' : '￥' + item2.price }}</span>
                    </template>
                    <template #origin-price>
                        <span>{{ item2.marking_price == 0 ? '' : '￥' + item2.marking_price }}</span>
                    </template>
                    <template #tags>
                        <van-tag plain type="danger" style="margin-right: 3px" v-for="(item3, index3) in item2.tag" :key="index3">{{
                            item3
                        }}</van-tag>
                    </template>
                    <!-- <template #footer>
					<van-button size="mini">按钮</van-button>
					<van-button size="mini">按钮</van-button>
				</template> -->
                    <template #num>
                        <span>{{ item2.view }}次观看</span>
                    </template>
                </van-card>
            </van-list>
        </van-pull-refresh>
        <xjmenubar :menubar="tabbar" :prevent="false" :cactive="cactive"></xjmenubar>
    </div>
</template>

<script>
import xjsearch from '@/components/shop/xjsearch.vue';
import xjmenubar from '@/components/shop/xjmenubar.vue';
export default {
    name: 'seachlist',
    components: {
        xjsearch,
        xjmenubar
    },
    data() {
        return {
            searchdata: '',
            tabbar: '',
            cactive: 0, //菜单索引
            list: [], //视频数据列表
            livelist: [],
            columnlist: [], //每次获取10个cardlist数据
            loading: true,
            finished: false,
            refreshing: false,
            page: 1, //第1页数据
            total: '', //获得总cardlist总数
        };
    },
    methods: {
        async getPhonePageData() {
            let res = await this.$frontaxios.post(this.$front.getPhonePageData);
            //console.log(res);
            if (!res.data) {
                this.$notify({ type: 'warning', message: '请设置店铺首页，再过来查看' });
                return;
            }
            if (res.code == 1) {
                this.tabbar = res.data.tabbar;
            } else {
                this.$notify({ type: 'warning', message: res.msg });
            }
        },
        async onLoad() {
            if (this.refreshing) {
                this.list = [];
                this.refreshing = false;
            }
            await this.getColumnList();
            this.list.push(...this.columnlist);
            this.page++;
            this.loading = false;
            if (this.list.length >= this.total) {
                this.finished = true;
            }
        },
        onRefresh() {
            // 清空列表数据
            this.finished = false;

            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;
            this.page = 1;
            this.onLoad();
            this.$toast.success('刷新成功');
        },
        onRefresh2() {
            this.page = 1;
            this.getLiveLIst(this.id);
            this.$toast.success('刷新成功');
        },
        async getColumnList() {
            //获得教程视频信息
            let query = {
                status: 1,
                page: this.page,
                limit: 10,
                keyword: this.searchdata
            };
            //console.log(query);
            let res = await this.$frontaxios.post(this.$front.getColumnList, query);
            //console.log(res);
            if (res.code == 1) {
                this.loading=true;
                this.columnlist = res.data.columndata;
                this.total = res.data.total;
                for (let i = 0; i < this.columnlist.length; i++) {
                    if (this.columnlist[i].tag) {
                        this.columnlist[i].tag = this.columnlist[i].tag.split(',');
                    }
                }
            } else {
                console.log('获取专栏数据列表失败');
            }
        },
        async getLiveList() {
            //获得直播列表
            let query = {
                status: 1,
                page: this.page,
                limit: 4,
                keyword: this.searchdata
            };
            let res = await this.$frontaxios.post(this.$front.getLiveList, query);
            //console.log(res);
            if (res.code == 1) {
                this.livelist = res.data.livecoursedata.slice(0,3);
                this.total = res.data.total;
                for (let i = 0; i < this.livelist.length; i++) {
                    if (this.livelist[i].tag) {
                        this.livelist[i].tag = this.livelist[i].tag.split(',');
                    }
                }
            } else {
                console.log('获取直播数据列表失败');
            }
        },
        clickColumn(id) {
            //console.log(id);
            this.$router.push({
                name: 'product',
                query: {
                    id
                }
            });
        },
        clickLive(id) {
            //console.log(id);
            this.$router.push({
                name: 'livecontent',
                query: {
                    id
                }
            });
        }
    },
    async created() {
        this.searchdata = localStorage.getItem('searchdata') ? localStorage.getItem('searchdata') : this.$route.params.searchdata;
        this.getPhonePageData(); //获得菜单栏数据初始化菜单数据
        this.onLoad();
        this.getLiveList(); //得到直播列表数据
    }
};
</script>

<style lang="scss" scoped>
	.searchlist {
		.van-card__content {
			margin-left: 20px;
		}

		.van-cell {
			align-items: center;
			border: 1px solid #eee;
			height: 40px;
		}
	}

	.child-item {
		margin-top: 10px;
		text-align: center;

		.vancol {
			margin-bottom: 8px;

			.defaulttagcolor {
				color: #87929B;
			}

			.selecttagcolor {
				color: #168DFA;
			}
		}
	}
</style>
